<template>
  <section>
    <van-sticky>
      <PageHeader title="钱包" />
    </van-sticky>

    <div class="pd10 bg-color-white font-common text-vertical-center" v-if="walletAccount">
      <span>金币：{{walletAccount.gold_coin}}个</span>，
      <span>总余额：{{walletAccount.balance}}元</span>，
      <span>提现中余额：{{walletAccount.withdrawing_balance}}元</span>，
      <span>可提现余额：<label class="color-red">{{walletAccount.withdraw_balance}}</label>元</span>
      <span><van-button round size="mini" type="primary" @click="$router.push({name: 'MyWalletWithdraw'})">提现</van-button></span>
    </div>

    <van-list
      class="mt10"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="requestData">
      <div class="flex flex-col bg-color-white font-common round-box mb10 ml10 mr10 pd10"
           v-for="(item, index) in dataList"
           :key="index">
        <div class="flex flex-left flex-row pb10 border-bottom-gray">时间：{{item.dateline|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>

        <div class="flex flex-left flex-row pb10 pt10">
          <div class="flex flex-left flex-row flex-1">
            <label v-if="item.money_type==USER_ACCOUNT_MONEY_TYPE_MONEY">金额</label><label v-else-if="item.money_type==USER_ACCOUNT_MONEY_TYPE_GOLD_COIN">金币</label>：{{item.op == 1 ? '+' : '-'}} {{item.amount}}
          </div>
          <div class="flex flex-left flex-row flex-1">余额：{{item.balance}}</div>
        </div>

        <div class="flex flex-left flex-row pt10 border-top-gray" v-if="item.remark">{{item.remark}}</div>
      </div>
    </van-list>
  </section>
</template>

<script>
import PageHeader from "../../componets/PageHeader";
import {myWalletAccountUri, myWalletRecordUri} from "../../../common/api";
import {USER_ACCOUNT_MONEY_TYPE_MONEY, USER_ACCOUNT_MONEY_TYPE_GOLD_COIN} from '../../../common/constants';

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      USER_ACCOUNT_MONEY_TYPE_MONEY: USER_ACCOUNT_MONEY_TYPE_MONEY,
      USER_ACCOUNT_MONEY_TYPE_GOLD_COIN: USER_ACCOUNT_MONEY_TYPE_GOLD_COIN,

      currentPage: 1,
      lastPage: 0,
      total: 0,
      pageSize: 10,
      loading: false,
      finished: false,
      dataList: [],

      walletAccount: null
    }
  },
  methods: {
    requestData() {
      const that = this;
      this.loading = true;
      const url = myWalletRecordUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          Toast.fail(msg);
        } else {
          that.loading = false;
          if (that.currentPage >= data.last_page) {
            that.finished = true;
          }
          that.currentPage = that.currentPage + 1;
          for (let i = 0; i < data.data.length; i++) {
            that.dataList.push(data.data[i]);
          }
          that.total = data.total;
          that.lastPage = data.last_page;
        }
      }, response => {
        // error callback
      })
    },
    myWalletAccount() {
      const that = this;
      const url = myWalletAccountUri;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          Toast(msg);
        } else {
          that.walletAccount = data;
        }
      }, response => {
        // error callback
      })
    }
  },
  mounted: function () {
    this.myWalletAccount();
  }
}
</script>

<style scoped>

</style>
